<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
      .progress-circle svg {  
        width: 100px;  
        height: 100px;  
        display: block;  
        margin: 0 auto;  
      }  
    </style>
  </head>
  <body>
    <div class="progress-circle">  
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  
        <circle cx="50" cy="50" r="40" fill="none" stroke="#eee" stroke-width="10" />  
        <circle cx="50" cy="50" r="40" fill="none" stroke="blue" stroke-width="10"  
                stroke-dasharray="251.2" stroke-dashoffset="125.6" />  
      </svg>  
    </div>
  </body>
</html>

<script>
  function updateProgress(percent) {  
    const circle = document.querySelector('.progress-circle svg circle:last-child');  
    const circumference = 2 * Math.PI * 40; // 计算圆的周长，半径为40  
    const offset = circumference - (circumference * percent / 100);  
    circle.style.strokeDashoffset = offset;  
  }  
    
  // 假设我们要更新进度到75%  
  updateProgress(75);
  setTimeout(() => {
    updateProgress(50);
  }, 1000);
</script>